import { useEffect, useState } from 'react'

import { Card, Form, Input, Button, Select, Table, Row, Col, message } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

// api
import { getHospitalListRequest } from '@api/hospitalList/index'
// ts 类型
import { getHosListSearchParamsType, hospitalListContentType } from '@api/hospitalList/model/hospitalListTypes'

export default function HospitalList() {

  // 定义表格源数据
  const [dataSource, setDataSource] = useState<hospitalListContentType>([])

  // 分页数据
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(3)
  const [total, setTotal] = useState(0)
  // search 参数
  const [searchParams, setSearchParams] = useState<getHosListSearchParamsType>({})
  // 表格数据加载状态
  const [isLoading, setIsLoading] = useState(false)
  

  const columns = [
    {
      title: '序号',
      width: 70,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render(data: string) {
        return (
          <img width={'100px'} src={`data:image/jpg;base64,${data}`} alt="" />
        )
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      dataIndex: 'param',
      render(data: {hostypeString: string, fullAddress: string}) {
        return data.hostypeString
      }
    },
    {
      title: '详细地址',
      dataIndex: 'param',
      render(data: {hostypeString: string, fullAddress: string}) {
        return data.fullAddress
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render(data: 0 | 1) {
        return (
          data ? '下线' : '上线'
        )
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: "操作",
      fixed: "right" as "right",
      width: "240px",
      align: "center" as "center",
      render() {
        return (
          <Row gutter={12} justify="space-between">
            <Col span={8}>
              <Button type="primary">查看</Button>
            </Col>
            <Col span={8}>
              <Button type="primary">排班</Button>
            </Col>
            <Col span={8}>
              <Button type="primary">上线</Button>
            </Col>
          </Row>
        );
      },
    },
  ];

  useEffect(() => {
    setIsLoading(true)
    const getHosList = async () => {
      const result = await getHospitalListRequest(current, pageSize, searchParams)
      const {content, totalElements} = result
      setDataSource(content)
      setTotal(totalElements)
      setIsLoading(false)
    }
    getHosList()
  }, [current, pageSize])

  return (
    <Card>
      <Form
        name="hospital_List"
      >
        <Row gutter={10}>
          <Col span={4}>
            <Form.Item
              name="hosname"
            >
              <Select
                placeholder="请输入省份"
                allowClear
              >
                <Select.Option value="male">河南</Select.Option>
                <Select.Option value="female">湖北</Select.Option>
                <Select.Option value="other">广东</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hosname"
            >
              <Select
                placeholder="请输入市"
                allowClear
              >
                <Select.Option value="male">郑州</Select.Option>
                <Select.Option value="female">武汉</Select.Option>
                <Select.Option value="other">深圳</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hosname"
            >
              <Select
                placeholder="请输入县/区"
                allowClear
              >
                <Select.Option value="male">高新区</Select.Option>
                <Select.Option value="female">洪山区</Select.Option>
                <Select.Option value="other">宝安区</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hosname"
            >
              <Input placeholder="医院名称" />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hoscode"
            >
              <Input placeholder="医院编号" />
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item
              name="hoscode"
            >
              <Select
                placeholder="医院类型"
                allowClear
              >
                <Select.Option value="male">三级甲等</Select.Option>
                <Select.Option value="female">三级乙等</Select.Option>
                <Select.Option value="other">二级甲等</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={4}>
            <Form.Item
              name="hoscode"
            >
              <Select
                placeholder="医院状态"
                allowClear
              >
                <Select.Option value="male">上线</Select.Option>
                <Select.Option value="female">下线</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item>
              <div style={{ width: '164px', display: 'flex', justifyContent: 'space-between' }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  icon={<SearchOutlined />}
                >
                  查询
                </Button>
                <Button
                  type="default"
                >
                  重置
                </Button>
              </div>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Table
        dataSource={dataSource}
        columns={columns}
        // 将 id 作为 key 使用
        rowKey='id'
        // 是否展示外边框和列边框
        bordered
        // 表格是否可滚动
        scroll={{
          x: 1500,
          y: 340
        }}
        // 分页设置
        pagination={{
          // 第几页
          current,
          // 每页多少条
          pageSize,
          // 总共多少条
          total,
          // 显示总共多少条
          showTotal: (total) => {
            return `总共 ${total} 条`;
          },
          // 是否展示 pageSize 切换器
          showSizeChanger: true,
          // 指定每页可以显示多少条
          pageSizeOptions: [5, 10, 20, 40],
          // 页码或 pageSize 改变的回调
          onChange: (page, pageSize) => {
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}
        // 加载状态
        loading={isLoading}
      />
    </Card>
  )
}
